<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="范珍">
        <title>vue进阶练习--名片</title>
        <link rel="stylesheet" href="animate.min.css">
        <script src="jquery.js"></script>
        <script src='vue.js'></script>
        <style>
            /*.fade-enter{
                opacity: 0;
            }
            .fade-enter-active{
                transition: all 1s;
            }
            .fade-leave-active{
                opacity: 0;
                transition: all 1s ;
            }*/

            .edit{
                width: 150px;
                background-color: red;
            }
            .fade-enter-active{
                animation:moveIn 2s;
            }
            .fade-leave-active{
                animation:moveOut 2s;
            }

            @keyframes moveIn{
                0%{
                    transform: translateY(-40px);
                }
                35%{
                    transform: translateY(40px);
                }
                100%{
                    transform: translateY(0px);
                }
            }

            @keyframes moveOut{
                0%{
                    transform: scale(1);
                }
                35%{
                    transform: scale(2);
                }
                100%{
                    transform: scale(0);
                }
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <show-view></show-view>
            <br>
            <button @click="isShow=!isShow">编辑</button>
            <br><br>
            <transition name="fade">
                <edit-view v-show="isShow"></edit-view>
            </transition>
            

             <!--<transition enter-active-class="animated fadeIn"
             leave-active-class="animated fadeOut">
                <edit-view v-show="isShow"></edit-view>
            </transition>-->

            <!--<transition @before-enter="beforeEnterHandle"
            @enter="enterHandle" @leave="leaveHandle"
            :css="false"
            >
                <edit-view v-show="isShow"></edit-view>
            </transition>-->
            
        </div>
        <script type="text/x-template" id="showView">
            <div>
                姓名:{{card.name}} <br>
                联系方式：{{card.phone}} <br>
            </div>
        </script>
        <script type="text/x-template" id="editView">
            <div class="edit">
                <input type="text" placeholder="请输入姓名" v-model="card.name"> <br>
                <input type="text" placeholder="请输入联系方式" v-model="card.phone" > <br>
            </div>
        </script>
        <script>
            var bus = new Vue({
                data:{
                    card:{
                        name:'lucy',
                        phone:'13383830979'
                    }
                }
            })
            Vue.component('show-view',{
                template:'#showView',
                data:function(){
                    return {card:bus.card};
                }
            })
            Vue.component('edit-view',{
                template:'#editView',
                data:function(){
                    return {card:bus.card};
                }
            })
         new Vue({
            el:'#app',
            data:{
                isShow:false
            },
            methods:{
                // el:要执行动画的标签元素
                // done：动画完成需要执行的回调函数

                // 进入的初始状态
                beforeEnterHandle:function(el){
                    el.style.opacity=0;
                },
                //进入的动画
                enterHandle:function(el,done){
                    $(el).animate({
                        opacity:1
                    },1000,done);
                },
                // 离开的动画
                leaveHandle:function(el,done){
                    $(el).animate({
                        opacity:0
                    },1000,done);
                }
            }
        })
        </script>
    </body>
</html>